<template>
	<view class="content">
		<view class="guiZ" @click="tap()">
			规则
		</view>
		<view class="flex">
			<p class="p1">做任务赚钱</p><p class="p2">任务记录</p>
		</view>
		<view class="middle1">
			<view class="">
				<p style="text-align: center;" class="riC">加油任务3选1</p>
			</view>
			<view class="middle_mid flex">
				<view class="five">
					<span><image src="../../static/f6.png" mode="" style="width: 50rpx;height: 50rpx;"></image> </span>
					<span>3天内加满300元</span><span>+5加油金</span>
					<p>3天累计消费返好礼，最高得5加油金</p>
				</view>
				<view class="five1"><button>领取任务</button></view>
			</view>
			<view class="middle_mid flex">
				<view class="five">
					<span><image src="../../static/f6.png" mode="" style="width: 50rpx;height: 50rpx;"></image> </span>
					<span>3天内加满300元</span><span>+5加油金</span>
					<p>3天累计消费返好礼，最高得5加油金</p>
				</view>
				<view class="five1"><button>领取任务</button></view>
			</view>
			<view class="middle_mid flex">
				<view class="five">
					<span><image src="../../static/f6.png" mode="" style="width: 50rpx;height: 50rpx;"></image> </span>
					<span>3天内加满300元</span><span>+5加油金</span>
					<p>3天累计消费返好礼，最高得5加油金</p>
				</view>
				<view class="five1"><button>领取任务</button></view>
			</view>
			<view class="middle_mid flex">
				<view class="five">
					<span><image src="../../static/f6.png" mode="" style="width: 50rpx;height: 50rpx;"></image> </span>
					<span>3天内加满300元</span><span>+5加油金</span>
					<p>3天累计消费返好礼，最高得5加油金</p>
				</view>
				<view class="five1"><button>领取任务</button></view>
			</view>
		</view>
		
		<view class="middle1">
			<view class="">
				<p style="text-align: center;" class="riC">日常任务</p>
			</view>
			<view class="middle_mid flex">
				<view class="five">
					<span><image src="../../static/f6.png" mode="" style="width: 50rpx;height: 50rpx;"></image> </span>
					<span>3天内加满300元</span><span>+5加油金</span>
					<p>3天累计消费返好礼，最高得5加油金</p>
				</view>
				<view class="five1"><button>领取任务</button></view>
			</view>
			<view class="middle_mid flex">
				<view class="five">
					<span><image src="../../static/f6.png" mode="" style="width: 50rpx;height: 50rpx;"></image> </span>
					<span>3天内加满300元</span><span>+5加油金</span>
					<p>3天累计消费返好礼，最高得5加油金</p>
				</view>
				<view class="five1"><button>领取任务</button></view>
			</view>
			<view class="middle_mid flex">
				<view class="five">
					<span><image src="../../static/f6.png" mode="" style="width: 50rpx;height: 50rpx;"></image> </span>
					<span>3天内加满300元</span><span>+5加油金</span>
					<p>3天累计消费返好礼，最高得5加油金</p>
				</view>
				<view class="five1"><button>领取任务</button></view>
			</view>
			<view class="middle_mid flex">
				<view class="five">
					<span><image src="../../static/f6.png" mode="" style="width: 50rpx;height: 50rpx;"></image> </span>
					<span>3天内加满300元</span><span>+5加油金</span>
					<p>3天累计消费返好礼，最高得5加油金</p>
				</view>
				<view class="five1"><button>领取任务</button></view>
			</view>
			<view class="middle_mid flex">
				<view class="five">
					<span><image src="../../static/f6.png" mode="" style="width: 50rpx;height: 50rpx;"></image> </span>
					<span>3天内加满300元</span><span>+5加油金</span>
					<p>3天累计消费返好礼，最高得5加油金</p>
				</view>
				<view class="five1"><button>领取任务</button></view>
			</view>
			<view class="middle_mid flex">
				<view class="five">
					<span><image src="../../static/f6.png" mode="" style="width: 50rpx;height: 50rpx;"></image> </span>
					<span>3天内加满300元</span><span>+5加油金</span>
					<p>3天累计消费返好礼，最高得5加油金</p>
				</view>
				<view class="five1"><button>领取任务</button></view>
			</view>
			<view class="middle_mid flex">
				<view class="five">
					<span><image src="../../static/f6.png" mode="" style="width: 50rpx;height: 50rpx;"></image> </span>
					<span>3天内加满300元</span><span>+5加油金</span>
					<p>3天累计消费返好礼，最高得5加油金</p>
				</view>
				<view class="five1"><button>领取任务</button></view>
			</view>
			
			<view class="middle_mid flex">
				<view class="five">
					<span><image src="../../static/f6.png" mode="" style="width: 50rpx;height: 50rpx;"></image> </span>
					<span>3天内加满300元</span><span>+5加油金</span>
					<p>3天累计消费返好礼，最高得5加油金</p>
				</view>
				<view class="five1"><button>领取任务</button></view>
			</view>
			<view class="middle_mid flex">
				<view class="five">
					<span><image src="../../static/f6.png" mode="" style="width: 50rpx;height: 50rpx;"></image> </span>
					<span>3天内加满300元</span><span>+5加油金</span>
					<p>3天累计消费返好礼，最高得5加油金</p>
				</view>
				<view class="five1"><button>领取任务</button></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		},
		methods:{
			tap(){
				uni.navigateTo({
					url:"/pages/index/GuiZe"
				})
			}
		}
	}
</script>

<style>
	.content{width: 90%;margin: 0 auto;}
	.flex{display: flex;justify-content: space-between;}
	.riC{padding: 10px 0;}
	.flex p{color: bisque}
	.p1{font-size: 40rpx;}
	.p2{padding-top: 5rpx;}
	.middle1{background-color: aliceblue;border-radius: 15px;padding: 20px;margin-bottom: 20px;}
	.middle_mid{border-bottom:#ccc 2px solid;margin-bottom:10px ;}
	.five{width: 100%;}
	.five1{width: 40%;}
	.five1 button{font-size: 25rpx;border-radius: 15px;border: 1px solid;margin-top: 10px;}
	.five span{font-size: 25rpx;line-height: 30px;}
	.five p{font-size: 25rpx;line-height: 30px;}
</style>